<template>
  <div class="product-menu">
    <van-nav-bar title="选择咖啡和小食" />
    <div class="product-tree-select-area">
      <van-tree-select
        :items="items"
        :main-active-index.sync="typeId"
        :height="treeSelectHeight"
        @click-nav="onClickNav"
      >
        <template #content>
          <van-cell-group>
            <van-card
              v-for="item in list"
              :key="item.id"
              :tag="item.tagDescription"
              :price="item.price"
              :title="item.productName"
              :thumb="item.imageLink"
            >
              <template #num>
                <van-button round size="mini" color="#88afd5" @click="toGoodsDetail(item.id)">+</van-button>
              </template>
              <template #desc>
                <p>{{item.engName}}</p>
                <p>{{item.size}}</p>
              </template>
            </van-card>
          </van-cell-group>
        </template>
      </van-tree-select>
    </div>
  </div>
</template>

<script>
import product from "@/assets/product.png";
export default {
  data() {
    return {
      typeId: 0,
      treeSelectHeight: 0,
      product,
      items: [],
      list: [
        {
          id: 1,
          productName: "榛果拿铁",
          tagDescription: "充2赠1",
          count: 0,
          type_id: 0,
          size: "大/单糖/热",
          engName: "Hazlnut Latte",
          price: "2.00",
          originPrice: 0,
          imageLink: "https://img.yzcdn.cn/vant/ipad.jpeg"
        },
        {
          id: 2,
          productName: "榛果拿铁",
          tagDescription: "充2赠1",
          count: 0,
          type_id: 0,
          size: "大/单糖/热",
          engName: "Hazlnut Latte",
          price: "2.00",
          originPrice: 0,
          imageLink: "https://img.yzcdn.cn/vant/ipad.jpeg"
        }
      ]
    };
  },
  mounted() {
    this.getViewHeight();
    this.axios.get("/productCategory.json").then(response => {
      if (response.status == "200") {
        this.items = response.data;
        this.$toast.loading({
          message: "加载中...",
          forbidClick: true,
          duration: 1000
        });
      }
    });
  },
  methods: {
    getViewHeight() {
      this.treeSelectHeight = document.body.clientHeight - 96;
    },
    toGoodsDetail(id) {
      this.$router.push(`/goodsDetail/${id}`);
    },
    onClickNav(index) {
      let id = index + 1;
      console.log(id);
      // todo:根据id从后台获取相对应的数据
      this.axios.get("").then(res => {
        if (res.code === "200") {
          this.list = res.data;
        }
      });
    }
  }
};
</script>

<style lang="less">
.product-menu {
  height: 100%;
  background-color: #efefef;
  img {
    pointer-events: none;
  }
  .product-tree-select-area {
    height: 100%;
    margin-top: 10px;
    padding: 0 10px;
    .van-tree-select {
      border-radius: 6px;
      overflow: hidden;
    }

    .van-sidebar {
      background-color: #ffffff;
      margin-right: 10px;
      border-radius: 6px;

      .van-sidebar-item {
        background-color: transparent;
        border-radius: 6px;
      }
    }
    .van-tree-select__content {
      border-radius: 6px;
      .van-cell-group {
        border-radius: 6px;
        background-color: transparent;
      }
    }
    .van-sidebar-item--select::before {
      background-color: #88afd5;
    }
    .van-card {
      background: transparent;
      border-radius: 6px;
      padding: 5px 10px;

      .van-card__content {
        p {
          margin-block-start: 0;
          margin-block-end: 0;
        }

        .van-button--mini {
          min-width: 22px;
          font-weight: bold;
          font-size: 18px;
        }
        .van-card__title {
          font-weight: bold;
        }
        .van-card__price {
          div {
            line-height: 22px;
            font-weight: bold;
          }
        }
      }
      .van-card__tag {
        position: absolute;
        top: auto;
        left: auto;
        right: 0;
        bottom: 5px;
        .van-tag--danger {
          background-color: #ff8102;
        }
        .van-tag--mark,
        .van-tag--mark::after {
          border-radius: 0;
        }
      }
    }
  }
}
</style>